<template>
  <div id="qaOnline" style="position: relative; background-color: Gainsboro">
    <el-row :gutter="2">
      <el-col :span="9" :xs="24">
        <el-card v-if="showColorDialogVar" style="height: 41vh">
          <div v-if="imgCount <= 1">
            <span>属性色块：</span>
          </div>
          <div id="colorPanel" class="icon-list">
            <div v-for="dict in colorNames" :key="dict.dictValue">
              <svg :style="'height: 30px;width: 18px;'">
                <rect width="18px" height="18px" :style="'fill:' + dict.dictLabel" />
              </svg>
              <span>{{ dict.dictValue }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div id="bottomDiv" style="bottom: 0">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="10" :xs="24">
            <el-form>
              <el-form-item style="margin-top: -5px; margin-bottom: -22px">
                <div v-if="imgCount > 1" align="left">
                  <span>属性色块：</span>
                  <el-button
                    v-if="!showColorDialogVar"
                    :disabled="isFullscreen"
                    style="transform: rotate(90deg)"
                    @click="showColorDialog()"
                    :body-style="{ align: 'right' }"
                    size="mini"
                    icon="el-icon-d-arrow-left"
                    circle
                  />
                  <el-button
                    v-if="showColorDialogVar"
                    :disabled="isFullscreen"
                    style="transform: rotate(90deg)"
                    @click="showColorDialog()"
                    :body-style="{ align: 'right' }"
                    size="mini"
                    icon="el-icon-d-arrow-right"
                    circle
                  />
                </div>
                <div v-if="imgCount <= 1">{{ '.' }}</div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FuseEditor',
  data() {
    return {
      colorNames: {},
      showColorDialogVar: false,
      isFullscreen: false,
    }
  },
  methods: {
    showColorDialog() {
      this.showColorDialogVar = !this.showColorDialogVar
      this.jumpToBottom()
    },
    jumpToBottom() {
      // const aLink = document.createElement('aaa');
      // aLink.href = "#bottomDiv";
      // document.body.appendChild(aLink);
      // aLink.click();
      // document.body.appendChild(aLink);
      // document.body.scrollTo(0, document.body.scrollHeight);
      document.querySelector('#bottomDiv').scrollIntoView(true)
    },
    contextmenuHandler(e) {
      e.preventDefault()
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  created() {},
  mounted() {},
  destroyed() {},
}
</script>
<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
  width: 100%;
  height: 100%;
}

.special_focus_toolTip {
  z-index: 7;
  position: absolute;
  display: none;
  width: 240px;
  height: 180px;
  border-style: solid;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgba(50, 50, 50, 0.701961);
  border-width: 0px;
  border-color: #333333;
  border-radius: 4px;
  color: #ffffff;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  font-family: 'Microsoft YaHei';
  line-height: 21px;
  padding: 10px 10px;
  pointer-events: none;
}

.icon-list {
  height: 160px;
  overflow-y: scroll;
  div {
    height: 30px;
    line-height: 30px;
    // margin-bottom: -5px;
    cursor: pointer;
    width: 50%;
    float: left;
  }
  span {
    display: inline-block;
    vertical-align: 0.5em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
